/***1 todo 异步请求页头和页尾***/

//1 验证是否登陆
var loginName=sessionStorage.getItem('loginName');

$('#top').load('data/top.php',function(){
    if(loginName){
        $('#login').parent().html('您好，欢迎回来'+loginName);
    }

});
$('#bottom').load('data/bottom.php');

/***********todo 模态框点击登陆*************/

//2 通过异步加载 页面头部和尾部
$('#top').load('data/top.php',function(){
    //处理是否登陆后的逻辑
    if(loginName){//登陆过
        $('#login').parent().html('您好，欢迎回来'+loginName);
        //todo 默认的订单查询功能
        getMyOrders();
        drawBuyStat();
        drawBuyStatSVG();
    }else{//没登陆过
        $('.modal').css('display','block');
    }
});

//todo  切换左栏菜单的效果
$('#main ul>li a').click(function(e){
    e.preventDefault();
    //todo 左边菜单的切换效果
    //todo 为当前点击a标签的父元素li添加class
    $(this).parent('li').addClass('active').siblings('.active').removeClass('active');
    //todo 右侧操作区域的切换i效果
    //todo 当前点击的a标签获取href属性
    $($(this).attr('href')).addClass('active').siblings('.active').removeClass('active');
});

//todo  订单查询功能
function getMyOrders(){
    //todo 利用ajax异步请求服务器
    $.getJSON('data/6_my_orders.php',{username:loginName},function(responseData){
        console.log(responseData);
        //todo
        var html='';
        for(var i=0;i<responseData.length;i++){
            var order=responseData[i];
            //todo 每个订单对应两个tr元素
            html+=`
              <tr>
                  <td colspan="6">
                      订单编号：${order.order_num}
                      <a href="#">喵喵自营</a>
                  </td>
              </tr>
              <tr>
                  <td>`;
                for(var j=0;j<order.productList.length;j++){
                    var p=order.productList[j];
                    html+=`
                        <a href="#"><img src="${p.pic}" title="${p.pname}" style="width: 60px;"/></a>
                   `;
                }
            html+=`</td>
              <td>${order.user_name}</td>
              <td>${order.price}<br>${order.payment_mode}</td>
              <td>${order.submit_time.replace('T','<br>')}</td>
              <td>${order.order_state==1?'等待付款':(order.order_state==2?'等待发货':(order.order_state==3?'订单完成':'其他状态'))}</td>
              <td>
                  <a href="#">查看</a><br/>
                  <a href="#">查看订单</a><br/>
                  <a href="#">确认收货</a><br/>
              </td>
          </tr>
            `;
            $('#order-table tbody').html(html);
        }
    });
}


//todo  绘制消费统计图（canvas版本）
function drawBuyStat(){
    //todo 登陆成功后或者点击消费统计后调用该方法
    $.getJSON('data/7_buy_stat.php',{username:loginName},function(responseData){

        //todo 开始根据访问的数据
        /*todo 开始绘图（折线图*/
        var w=800;
        var h=600;
        var fontSize=14;
        var padding=60;//todo 绘制内容到边界的距离
        var origin={x:padding,y:h-padding};//todo 原点
        var xEnd={x:w-padding,y:h-padding};//todo x轴端点
        var yEnd={x:padding,y:padding};//todo y轴端点
        var count=responseData.length;//todo 数据的数量
        var canvas=$('#canvas-buy-stat')[0];
        canvas.width=w;
        canvas.height=h;
        var ctx=canvas.getContext('2d');
        ctx.font=fontSize+'px Simhei';
        ctx.textBaseline='bottom';

        //todo 绘制x坐标轴
        ctx.beginPath();
        ctx.moveTo(origin.x,origin.y);
        ctx.lineTo(xEnd.x,xEnd.y);
        ctx.lineTo(xEnd.x-15,xEnd.y-15);
        ctx.moveTo(xEnd.x,xEnd.y);
        ctx.lineTo(xEnd.x-15,xEnd.y+15);

        var xpointSpacing=(w-2*padding)/(count+1);//todo x轴的坐标点间距
        for(var i=0;i<count;i++){
            var x=origin.x+(i+1)*xpointSpacing;
            var y=origin.y;
            ctx.moveTo(x,y);//todo x轴坐标点的起点
            ctx.lineTo(x,y-5);//todo x坐标点的终点
            var txt=responseData[i].label;
            //todo 绘制x轴坐标点d的文字
            var txtwidth=ctx.measureText(txt).width;
            ctx.fillText(txt,x-txtwidth/2,y+fontSize+3);

        }

        ctx.stroke();//todo 对路径进行描边

        //todo 绘制y坐标轴
        ctx.moveTo(origin.x,origin.y);
        ctx.lineTo(yEnd.x,yEnd.y);
        ctx.lineTo(yEnd.x+15,yEnd.y+15);
        ctx.moveTo(yEnd.x,yEnd.y);
        ctx.lineTo(yEnd.x-15,yEnd.y+15);

        var ypointCount=6;
        var ypointSpacing=(h-2*padding)/ypointCount;//todo y轴的坐标点间距

        //todo 寻找消费金额中的最大值
        var maxValue=responseData[0].value;
        for(var i=0;i<count;i++){
            if(maxValue<responseData[i].value){
                maxValue=responseData[i].value;
            }
        }

        for(var j=0;j<ypointCount-1;j++){
            var x=origin.x;
            var y=origin.y-(j+1)*ypointSpacing;
            ctx.moveTo(x,y);//todo 坐标点的起点
            ctx.lineTo(x+5,y);//todo 坐标点的终点
            //todo y轴坐标点上的数字
            var txt=parseInt(maxValue*(j+1)/ypointCount);
            var txtwidth=ctx.measureText(txt).width;
            ctx.fillText(txt,x-txtwidth-5,y+7);
        }

        ctx.stroke();//todo 对路径进行描边

        //todo 绘制统计图（折线图和柱状图）
        for(var i=0;i<count;i++) {//todo 12个数值点
            var value = responseData[i].value;
            var height = value * (h - 2 * padding) / (maxValue);//todo 每个点的高度
            var x = origin.x + (i + 1) * xpointSpacing;
            var y = origin.y - height;
            //todo 绘制折线图
            if (i == 0) {
                ctx.moveTo(x, y);//todo 折线图起点
            } else {
                ctx.lineTo(x, y);//todo 折线图终点
            }

            ctx.stroke();//todo 对路径进行描边


            //todo 绘制柱状图
            ctx.strokeRect(x,y,xpointSpacing/2,height);

            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);

            var lg = ctx.createLinearGradient(x, y, x, origin.y);
            lg.addColorStop(0, `rgb(${r},${g},${b})`);
            lg.addColorStop(1, `rgba(${r},${g},${b},0)`);

            ctx.fillStyle=lg;//todo 使用线性渐变色
            ctx.fillRect(x, y, xpointSpacing/2,height);

            //todo 标注金额
            var txt = responseData[i].value;
            var txtwidth = ctx.measureText(txt).width;
            ctx.fillText(txt,x-txtwidth/2,y+fontSize-10);
        }

    });
}



//todo  绘制消费统计图 （svg框架版）
function drawBuyStatSVG(){
    $.getJSON('data/7_buy_stat.php',{username:loginName},function(responseData){
        //todo 开始调用fusionCharts绘制统计图
        var chart=new FusionCharts({
            type:/*'line',*/'doughnut2d',/*'pie2d',*//*'bar2d',*//*'column3d',*/
            renderAt:'buy-stat-container-svg',
            width:800,
            height:600,
            dataFormat:'json',
            dataSource:{    //todo 指定数据源
                data:responseData
            }
        });
        chart.render();//todo 渲染出统计图
    });
}











































































